<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="renderer" content="webkit">
  <title>view | LAYUI ADMIN</title>
  <link href="../../assets/favicon.ico" type="image/x-icon" rel="shortcut icon">
  <link href="https://www.layuicdn.com/layui/css/layui.css" type="text/css" rel="stylesheet">
  <link href="../../css/admin.css" rel="stylesheet">
  <style>
    .layui-btn {
      text-transform: uppercase;
    }
  </style>
</head>

<body class="layadmin-layout-body">
  <div class="layui-fluid">
    <div class="layadmin-title">扩展组件：layui.lang</div>

    <div class="layui-card">
      <div class="layui-card-header">基础弹窗</div>
      <div class="layui-card-body" is-template data-ajax-url="" data-ajax-params="{}">
        <form class="layui-form">
          <div class="layui-form-item">
            <label class="layui-form-label">{{ t('form.userName') }}</label>
            <div class="layui-form-input">
              
            </div>
          </div>
        </form>
      </div>
    </div>

    <div class="layui-card">
      <div class="layui-card-header">询问弹窗</div>
      <div class="layui-card-body">
        <blockquote class="layui-elem-quote">
          <p>与 <code>layui.view.popup</code> 不同的是，<code>layui.view.confirm</code> 适用于带有询问的弹窗</p>
        </blockquote>
        <button type="button" class="layui-btn" lay-event="confirm">confirm</button>
      </div>
    </div>

    <div class="layui-card">
      <div class="layui-card-header">带状态的询问弹窗</div>
      <div class="layui-card-body">
        <blockquote class="layui-elem-quote">
          <p><code>layui.view.alert</code> 是在 <code>layui.view.confirm</code>，但是更加的规范</p>
        </blockquote>
        <button type="button" class="layui-btn layui-btn-primary" lay-event="alert">default</button>
        <button type="button" class="layui-btn" lay-event="alert" lay-type="success">success</button>
        <button type="button" class="layui-btn layui-btn-danger" lay-event="alert" lay-type="error">error</button>
        <button type="button" class="layui-btn layui-btn-warm" lay-event="alert" lay-type="warning">warning</button>
        <button type="button" class="layui-btn layui-bg-cyan" lay-event="alert" lay-type="info">info</button>
      </div>
    </div>

    <div class="layui-card">
      <div class="layui-card-header">其他的弹窗</div>
      <div class="layui-card-body">
        <button type="button" class="layui-btn" lay-event="other" lay-type="drawer">抽屉</button>
        <button type="button" class="layui-btn layui-btn-danger" lay-event="other" lay-type="error">消息提示</button>
        <button type="button" class="layui-btn layui-btn-warm" lay-event="other" lay-type="broadcast">广播通知</button>
      </div>
    </div>

    <div class="layui-card">
      <div class="layui-card-header">loading 效果</div>
      <div class="layui-card-body">
        <div class="layui-btn-container">
          <button type="button" class="layui-btn" lay-event="loading" lay-type="loading">加载</button>
          <button type="button" class="layui-btn" lay-event="loading" lay-type="removeLoading">移除</button>
          <div class="layui-bg-cyan" style="width: 100%; height: 300px; border: 1px solid #f6f6f6;" id="loading"></div>
        </div>
      </div>
    </div>

  </div>
</body>

<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
  layui.config({
    base: '../../js/'
  }).extend({
    index: 'index'
  }).use(['index', 'util'], function() {
    var $ = layui.jquery;
    var admin = layui.admin;
    var view = layui.view;
    var laytpl = layui.laytpl;

    layui.util.event('lay-event', {
      popup: function() {
        var type = $(this).attr('lay-type');

        if (type === 'iframe') {
          view.popup({
            type   : 2,
            title  : 'iframe 展示',
            area   : ['70%', '450px'],
            content: 'https://www.cnblogs.com/blackcat/'
          });
        } else if (type === 'iframeTop') {
          admin.popup({
            type   : 2,
            title  : '顶层 iframe 展示',
            area   : ['70%', '450px'],
            content: 'https://www.cnblogs.com/blackcat/'
          })
        } else {
          view.popup({
            content: [
              '<p>这是最基础使用，仅仅用于信息展示</p>',
              '<button type="button" lay-event="other">button</button>'
            ].join(''),
            success: function($layer) {
              var $btn = $layer.find('button')
              $btn.on('click', function() {
                view.popup('内部')
              })
            }
          });
        }
      },
      confirm: function() {
        view.confirm({
          content: '这是一个带有询问的弹窗',
          yes: function() {
            admin.msg('不需要弹窗关闭，则 return false');
            return false; // 如果不需要弹窗关闭，则 return false
          }
        });
      },
      alert: function() {
        var type = $(this).attr('lay-type');
        var messages = {
          success: '保存成功！',
          error: '系统异常！',
          warning: '确定删除？',
          info: '当前权限不足，请重试。',
          default: '默认情况下不存在前缀图标，仅仅保留确认按钮'
        };
        view.alert(messages[type] || messages.default, type);
      },
      other: function() {
        var type = $(this).attr('lay-type');
        if (type === 'error') {
          view.error('系统出错，您需要联系管理员');
        } else if (type === 'drawer') {
          view.popupRight({
            title: '请填写表单',
            content: laytpl([
              '<form class="layui-form">',
              '<div class="layui-form-item"><label class="layui-form-label">姓名</label>',
              '<div class="layui-input-block"><input class="layui-input" type="text" value="{{d.name}}"></div></div>',
              '<div class="layui-form-item"><label class="layui-form-label">年龄</label>',
              '<div class="layui-input-block"><input class="layui-input" type="number" max="100" value="{{d.age}}"></div></div>',
              '</form>'
            ].join('')).render({name: '', age: 12 })
          });
        } else if (type === 'broadcast') {
          view.broadcast({
            content: '火灾出现，请赶紧撤离现场',
            title  : '紧急通知'
          });
        }
      },
      loading: function() {
        var type = $(this).attr('lay-type');
        if (type === 'loading') {
          view.loading('#loading')
        } else {
          view.removeLoading()
        }
      }
    });
  });
</script>

</html>